<template>
  <div class="essay-container">
    <div class="title-container">
      <h1 class="title">
        信息管理
      </h1>
    </div>
    <from-filter
      @handleFilter="handleFilter"
      @handleCreate="handleCreate"
      :typeOptions="typeOptions"
    />
    <from-table
      :tablekey="tablekey"
      :listLoading="listLoading"
      :list="list"
      @handleUpdate="handleUpdate"
      @handleUpdateStatus="handleUpdateStatus"
      @handleDelete="handleDelete"
    />
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList()"
    />
  </div>
</template>

<script>
import filter from "@/components/board/Essay/EssayFilter";
import table from "@/components/board/Essay/EssayTable";
import Pagination from "@/components/board/Essay/EssayPagination";
import EssayService from "@/service/essay";
import TypeService from "@/service/type";
import { findAssign } from "@/utils/tools";

const essayService = new EssayService(),
  typeService = new TypeService();
export default {
  name: "Essay",
  components: {
    FromFilter: filter,
    FromTable: table,
    Pagination
  },
  data() {
    return {
      total: 0,
      listAll: [],
      preCaheList: [],
      //查询参数
      listQuery: {
        title: "",
        page: 1,
        limit: 10,
        type: ""
      },
      //下拉列表选项参数
      typeOptions: [{ value: "类型1" }, { value: "类型2" }],
      //table的key
      tablekey: 0,
      //旋转按钮
      listLoading: false,
      //table数据
      list: []
      //
    };
  },
  created() {
    this.getList();
    this.initInfo();
  },
  methods: {
    //初始信息
    async initInfo() {
      this.typeOptions = await typeService.findType();
      this.listAll = await essayService.findEssayAll();
    },
    //获取列表
    async getList(page) {
      this.listLoading = true;
      let param = {
        offset: (this.listQuery.page - 1) * this.listQuery.limit,
        limit: this.listQuery.limit
      };
      if (this.preCaheList.length > 0) {
        this.pageList(param);
        this.listLoading = false;
        return;
      }
      this.list = await essayService.findEssay(param);
      this.total = await essayService.findEssayCount();
      this.listLoading = false;
    },
    pageList(param) {
      const { offset, limit } = param;
      this.list = this.preCaheList.slice(offset, offset + limit);
    },
    //条件查询
    handleFilter(queryParm) {
      const { title, type } = queryParm;
      this.listQuery.page = 1;
      this.listQuery.title = title;
      this.listQuery.type = type;
      if (!this.listQuery.title && !this.listQuery.type) {
        this.preCaheList = [];
        this.getList();
        return;
      }
      this.listLoading = true;
      let retrunMess = findAssign(
        this.listAll,
        this.listQuery.title,
        this.listQuery.type
      );
      if (retrunMess) {
        this.total = retrunMess.length;
        this.list = retrunMess.slice(0, this.listQuery.limit);
        this.preCaheList = retrunMess;
        this.listLoading = false;
        return;
      }
      this.$message({
        message: "未找到指定条件文章！",
        type: "warning"
      });
    },
    //点击新建
    handleCreate() {
      this.$router.push({ name: "EssayEdit", params: { origin: "create" } });
    },
    //修改列表点击
    handleUpdate(row) {
      this.$store.commit("updateUpdateInfo", row);
      this.$router.push({ name: "EssayEdit", params: { origin: "update" } });
    },
    //上下架
    handleUpdateStatus(row, tar) {
      let status = tar === "up" ? 1 : 0,
        id = row.id;
      essayService.changeEssayStatus({ id, status }).then(() => {
        row.status = status;
      });
    },
    //删除
    handleDelete(row, index) {
      let id = row.id;
      essayService.destroyEssay({ id }).then(async () => {
        this.list.splice(index, 1);
        this.listAll = await essayService.findEssayAll();
        this.total--;
      });
    }
  }
};
</script>

<style scoped>
.title-container {
  width: 100%;
  padding: 20px;
  font-weight: 500;
}
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.essay-container {
  height: 100%;
  overflow: auto;
}
</style>